<template>
  <div class="g-container" :style="gContainerStyle">
    <div class="g-left">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="g-left-content"
        :style="leftContentStyle(item)"
      >
        <!-- <div class="d3"></div> -->
        <div :style="getNumStyle(item.color)">{{ item.num }}</div>
        <div :style="rightContentStyle">
          <span :style="titleStyle">{{ item.title }}</span>
          <br />
          <span :style="unitStyle">{{ item.unit }}</span>
        </div>
      </div>
    </div>
    <div :id="uniqueID" :style="echartContainer" />
  </div>
</template>

<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
export default {
  name: "Gongdian",
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: "",
      list: [
        {
          bgimg: require("@/assets/linglong/bg_shishigoudianliang.png"),
          num: 250,
          title: "实时购电量",
          unit: "kWh",
          color: "#FFFD9B"
        },
        {
          bgimg: require("@/assets/linglong/bg_shishiranmeijizuliang.png"),
          num: 352,
          title: "实时燃煤机组量",
          unit: "kWh",
          color: "#4FC7FF"
        },
        {
          bgimg: require("@/assets/linglong/bg_shishitaiyangnengliang.png"),
          num: 423,
          title: "实时太阳能量",
          unit: "kWh",
          color: "#5BFBCC"
        }
      ]
    };
  },
  computed: {
    leftContentStyle() {
      return function(item) {
        return {
          backgroundImage: `url(${item.bgimg})`,
          paddingLeft: 18 * this.$root.setting.scale + "px",
          paddingRight: 14 * this.$root.setting.scale + "px",
          width: 306 * this.$root.setting.scale + "px",
          height: 70 * this.$root.setting.scale + "px"
        };
      };
    },
    rightContentStyle() {
      return {
        padding: 13 * this.$root.setting.scale + "px"
      };
    },
    titleStyle() {
      return {
        fontSize: 24 * this.$root.setting.scale + "px",
        fontFamily: "PingFang SC",
        fontWeight: 400 * this.$root.setting.scale,
        color: "rgba(255,255,255,1)",
        lineHeight: 31 * this.$root.setting.scale + "px"
      };
    },
    unitStyle() {
      return {
        color: "#A0C8DB",
        fontSize: 18 * this.$root.setting.scale + "px",
        fontFamily: "PingFang SC"
      };
    },
    gContainerStyle() {
      return {
        gridTemplateRows: [306, 210]
      };
    },
    echartContainer() {
      const width = 306 * this.$root.setting.scale;
      return {
        height: "100%",
        marginTop: "1%",
        width: `calc(100% - ${width}px)`
      };
    }
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    var scale = this.$root.setting.scale;

    var option = {
      title: null,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: "#ddd"
          }
        },
        backgroundColor: "rgba(255,255,255,1)",
        padding: [5, 10],
        textStyle: {
          color: "#7588E4"
        },
        extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
      },
      legend: {
        right: 20 * scale,
        data: ["购电", "煤机组", "太阳能"],
        textStyle: {
          color: "#ffffff"
        }
      },
      xAxis: {
        type: "category",
        data: ["00:00", "2:00", "6:00", "10:00", "14:00", "18:00", "22:00"],
        boundaryGap: false,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: "#609ee9"
          }
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14 * scale,
            color: "#ffffff"
          }
        }
      },
      yAxis: {
        type: "value",
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14 * scale,
            color: "#ffffff"
          }
        }
      },
      series: [
        {
          name: "购电",
          type: "line",
          smooth: true,
          showSymbol: false,
          symbol: "circle",
          symbolSize: 6,
          data: ["240", "110", "100", "110", "120", "140", "200"],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(255, 253, 155, 0.6)"
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 253, 155, 0.2)"
                  }
                ],
                false
              )
            }
          },
          itemStyle: {
            normal: {
              color: "#FFFD9B"
            }
          },
          lineStyle: {
            normal: {
              width: 1
            }
          }
        },
        {
          name: "煤机组",
          type: "line",
          smooth: true,
          showSymbol: false,
          symbol: "circle",
          symbolSize: 6,
          data: ["120", "100", "114", "222", "123", "120", "233"],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(79, 199, 255, 0.6)"
                  },
                  {
                    offset: 1,
                    color: "rgba(79, 199, 255, 0.2)"
                  }
                ],
                false
              )
            }
          },
          itemStyle: {
            normal: {
              color: "#4FC7FF"
            }
          },
          lineStyle: {
            normal: {
              width: 1
            }
          }
        },
        {
          name: "太阳能",
          type: "line",
          smooth: true,
          showSymbol: false,
          symbol: "circle",
          symbolSize: 6,
          data: ["190", "220", "230", "231", "233", "256", "279"],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(91, 251, 204, 0.6)"
                  },
                  {
                    offset: 1,
                    color: "rgba(91, 251, 204, 0.2)"
                  }
                ],
                false
              )
            }
          },
          itemStyle: {
            normal: {
              color: "#5BFBCC"
            }
          },
          lineStyle: {
            normal: {
              width: 1
            }
          }
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  methods: {
    getNumStyle(color) {
      return {
        color: color,
        width: 85 * this.$root.setting.scale + "px",
        height: 38 * this.$root.setting.scale + "px",
        fontSize: 50 * this.$root.setting.scale + "px",
        fontFamily: "PingFang SC",
        fontWeight: 400 * this.$root.setting.scale
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.g-container {
  width: 100%;
  display: flex;
  /*grid-template-columns: 306px calc(100% - 306px);*/
  height: 100%;
  padding: 20px;

  .g-left {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .g-left-content {
      // border: 1px dashed #FFFFFF;
      background-size: 100% 100%;
      display: flex;
      position: relative;
    }
  }
}
.d3 {
  position: absolute;
  top: 0px;
  border: 1px solid #000;
  height: 0;
  width: 0;
  border-left: 5px solid #00000000;
  border-right: 5px solid #03a9f4;
  border-top: 5px solid #00000000;
  border-bottom: 5px solid #00000000;
  transform: rotate(45deg); /*顺时针旋转90°*/
}
</style>
